		const URL='http://localhost:3000/';
		let inputElem = document.getElementById("input"); //input框元素
		var inputValue; //input值
		var todoList = document.getElementById('todoList'); //todolist元素
		document.onkeydown =cdk; 
	
	
	
		var datas=[];

		function cdk(){ 
		    if(event.keyCode ==13){
				insertTodoTest()
		        //console.log("按下enter");
		    }
		}
		inputElem.oninput = function() { //监听input
			inputValue = inputElem.value;
			//console.log(inputValue);
		}


		function insertTodoTest() { //添加todo节点
			if (inputValue == null) {
				alert("输入不能为空");
			} else {	
				//插入数据
				var ajax = new XMLHttpRequest();
				ajax.open('get',URL+'add?value=off&text='+inputValue);	
				ajax.send();
				ajax.onreadystatechange = function () {
				   if (ajax.readyState==4 &&ajax.status==200) {
				    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
				　　　　console.log(JSON.parse(ajax.responseText)[0].id);//自增id
				todoList.innerHTML +=
				
					'<li id="'+JSON.parse(ajax.responseText)[0].id+'" class="bg-success" style="margin-bottom:10px;height-line:34px;height:34px;width:340px">' +
					'<input class="checkbox" style="margin-top:10px;float=left;display:inline-block;" value="off" onclick="onClickHander(this)" type="checkbox"><a>' //value的值与是否选中无关
					+
					inputValue +
					'</a><button class="btn btn-danger" style="float:right;" onclick="remove(this)">删除</button>' +
					'</li>';
						checkboxInit(); //复位勾选状态
						inputElem.value = null; //归零
						inputValue = null; //归零
				  　　}
				}	
				//console.log(todoList)
		
			}
		}

		function checkboxInit() { //通过value的值,遍历li元素，调整checkbox的选中状态
			var list = document.getElementById('todoList').getElementsByTagName('li');
			for (let i = 0; i < list.length; i++) {
				if (list[i].getElementsByTagName('input')[0].value == "on")
					list[i].getElementsByTagName('input')[0].checked = true;
				//console.log(list[i].getElementsByTagName('input')[0].value);
				// console.log(list[i].getElementsByTagName('input')[0].checked);
			}
		}

		function remove(obj) { //移除todo节点
		//console.log(obj.parentNode);
		var ajax = new XMLHttpRequest();
		ajax.open('get',URL+'remove?id='+obj.parentNode.id);
		ajax.send();
		ajax.onreadystatechange = function () {
		   if (ajax.readyState==4 &&ajax.status==200) {
		   obj.parentNode.remove();
		  　　}
		}
		}



		function onClickHander(obj) {
			if (obj.checked) {
				obj.value = "on";
			} else {
				obj.value = "off";
			}
			//监听就更新对应id的状态
			var ajax = new XMLHttpRequest();
			ajax.open('get',URL+'update?id='+obj.parentNode.id+'&value='+obj.value);	
			ajax.send();
			ajax.onreadystatechange = function () {
			   if (ajax.readyState==4 &&ajax.status==200) {
			    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
			　　　　console.log(ajax.responseText);//输入相应的内容
					
			  　　}
			}
			//console.log(obj.parentNode.id);
			//console.log(obj.value);
		}



		function load() {
			var ajax = new XMLHttpRequest();
			ajax.open('get',URL+'load');
			console.log(todoList.innerHTML);
			ajax.send();
			ajax.onreadystatechange = function () {
			   if (ajax.readyState==4 &&ajax.status==200) {
			    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
				var jsondata=JSON.parse(ajax.responseText).data;
				//console.log(JSON.parse(ajax.responseText));//输入相应的内容
				if(jsondata.length==0)
				console.log("空");
					// todoList.innerHTML=null;
					for(let i=0;i<jsondata.length;i++)
					{
					todoList.innerHTML+=
					'<li id="'+jsondata[i].id+'" class="bg-success" style="margin-bottom:10px;height-line:34px;height:34px;width:340px">' +
					'<input class="checkbox" style="margin-top:10px;float=left;display:inline-block;" value="'+jsondata[i].value+'" onclick="onClickHander(this)" type="checkbox"><a>' //value的值与是否选中无关
					+
					jsondata[i].text +
					'</a><button class="btn btn-danger" style="float:right;" onclick="remove(this)">删除</button>' +
					'</li>';
					}
					// todoList.innerHTML=JSON.parse(ajax.responseText)[0].todo;
					
				checkboxInit(); //复位勾选状态
			  　　}
			}
			
			//todoList.innerHTML = localStorage.getItem("TodoList");

		}

		
		load();
